import { useState } from 'react'

function Versions(): React.JSX.Element {
  const [versions] = useState(window.electron.process.versions)

  return (
    <ul className="versions">
      <li className="electron-version">Electron v{versions.electron}</li>
      <li className="chrome-version">Chromium v{versions.chrome}</li>
      <li className="node-version">Node v{versions.node}</li>
    </ul>
  )
}

export const DragView = ({
  children
}: {
  children: React.ReactNode
}): React.JSX.Element => {
  let isDragging = false
  const offset = { x: 0, y: 0 }
  const handleMouseDown = (e): void => {
    isDragging = true
    offset.x = e.clientX
    offset.y = e.clientY
    window.addEventListener('mousemove', handleMouseMove)
    window.addEventListener('mouseup', handleMouseUp)
  }

  const handleMouseMove = (e): void => {
    if (!isDragging) return
    window.electron.ipcRenderer.send('window-move', {
      x: e.screenX - offset.x,
      y: e.screenY - offset.y
    })
  }

  const handleMouseUp = (): void => {
    isDragging = false
    window.removeEventListener('mousemove', handleMouseMove)
    window.removeEventListener('mouseup', handleMouseUp)
  }
  return (
    <>
      <div className="w-full h-full" onMouseDown={handleMouseDown}>
        {children}
      </div>
    </>
  )
}
export default Versions
